<script setup>
// #region 引入包, 函数和组件
import { ref } from "vue";
import { useRoute } from "vue-router"; // 路由信息
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const route = useRoute();
// #endregion

// #region // 变量
const imgs = {
  films: {
    films:
      "",
    img: "",
  },
  cinemas: {
    cinemas:
      "",
    img: "",
  },
  center: {
    center:
      "",
    img: "",
  },
};
// #endregion

// #region // 函数

// #endregion

// #region // 生命周期和vue函数
// console.log(route);
// #endregion
</script>

<template>
  <div class="home">
    <router-view v-slot="{ Component }">
      <transition mode="out-in" name="page">
        <component :is="Component" :key="$route.name" />
      </transition>
    </router-view>
    <footer>
      <router-link to="/home" :class="{ 'router-active': route.name === 'films' }">
        <img :src="imgs.films[route.name] || imgs.films.img" />
        电影
      </router-link>
      <router-link to="/cinemas" :class="{ 'router-active': route.name === 'cinemas' }">
        <img :src="imgs.cinemas[route.name] || imgs.cinemas.img" />
        影院
      </router-link>
      <a href="#">
        <img src="https://mall.s.maizuo.com/mzmovie-icon-news-42x42-gray.png" />
        资讯
      </a>
      <router-link to="/center" :class="{ 'router-active': route.name === 'center' }">
        <img :src="imgs.center[route.name] || imgs.center.img" />
        我的
      </router-link>
    </footer>
  </div>
</template>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

footer {
  height: 0.5rem;
  border-top: 0.01rem solid #f8f8f8;
  display: flex;
  justify-content: space-around;
  z-index: 3;
  background: #fff;

  .router-active {
    color: #ff5500;
  }

  a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.1rem;
    color: var(--cl-wh);
  }

  img {
    width: 0.21rem;
    height: 0.21rem;
    margin-bottom: 0.02rem;
  }
}
</style>
